<style lang="scss" scoped>
.sex {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: 248px;
}
</style>

<template>
    <div>
        <div>
            <van-nav-bar title="性别" left-arrow @click-left="router.back()"></van-nav-bar>
            <div style="display: flex; justify-content: space-around; margin-top: 100px">
                <img src="../../images/Girl.png" height="125" width="120" @click="changeSex(true)" alt="">
                <img src="../../images/Boy.png" height="125" width="120" @click="changeSex(false)" alt="">
            </div>
            <div class="sex" :style="{ left: sex ? '84px' : '271px'}">
                <img src="../../images/success.png" style="width: 100%; height: 100%" alt="">
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
// 路由跳转
const router = useRouter()
// 性别存储
const sex = ref()
let newSex = ref(JSON.parse(localStorage.getItem('result')) || '')
console.log(newSex.value.sex);

sex.value = localStorage.getItem('sex') === '2'

// 修改性别
const changeSex = (value: boolean) => {
    sex.value = value
    localStorage.setItem('sex', value ? '2' : '1')
}
</script>